new Vue({
    el: '#app',
    data: {
        customers: [], // 存储顾客数据
        currentOrderBy: 0, // 当前的排序方式
        currentReverse: 1, // 当前的排序方向
        currentFilter: null // 当前的筛选项
    },
    methods: {
        getAll(type) {
            this.currentType = type;
            this.fetchData();
        },
        filterData(orderByType) {
            this.currentOrderBy = orderByType;
            this.currentFilter = orderByType; // 记录当前筛选项
            this.fetchData();
        },
        formatDate(timestamp) {
            const date = new Date(timestamp);
            return date.toLocaleDateString();
        },
        fetchData() {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://testcalc.meiguanjia.net:8039/queryCustomer', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        // 解析响应数据并更新 Vue 实例的数据
                        const responseData = JSON.parse(xhr.responseText);
                        this.customers = responseData.content; // 更新客户数据
                    } else {
                        alert('请求失败，状态码：' + xhr.status);
                    }
                }
            };
            xhr.timeout = 2000;
            xhr.ontimeout = () => {
                console.error('Request timed out');
            };
            xhr.onerror = () => {
                console.error('Network error occurred');
            };
            const jsonData = JSON.stringify({
                "type": this.currentType,
                "orderByType": this.currentOrderBy,
                "isReverse": this.currentReverse,
                "pageSize": 10,
                "pageNumber": 0
            });
            xhr.send(jsonData);
        }
    },
    created() {
        this.getAll(0); // 初始化时加载全部客户数据
    }
});
